import { Card, Button, Space, Tag, Descriptions, message } from 'antd';
import { PlayCircleOutlined, StopOutlined, ReloadOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';
import axios from 'axios';

export const Settings = () => {
  const [serverStatus, setServerStatus] = useState({
    running: false,
    uptime: 0,
    version: '2.0.0',
  });
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    loadServerStatus();
  }, []);

  const loadServerStatus = async () => {
    try {
      const response = await axios.get('/api/server/status');
      setServerStatus(response.data);
    } catch (error) {
      console.error('Failed to load server status');
    }
  };

  const handleStart = async () => {
    setLoading(true);
    try {
      await axios.post('/api/server/start');
      message.success('Server started successfully');
      loadServerStatus();
    } catch (error) {
      message.error('Failed to start server');
    } finally {
      setLoading(false);
    }
  };

  const handleStop = async () => {
    setLoading(true);
    try {
      await axios.post('/api/server/stop');
      message.success('Server stopped successfully');
      loadServerStatus();
    } catch (error) {
      message.error('Failed to stop server');
    } finally {
      setLoading(false);
    }
  };

  const handleRestart = async () => {
    setLoading(true);
    try {
      await axios.post('/api/server/stop');
      await new Promise(resolve => setTimeout(resolve, 1000));
      await axios.post('/api/server/start');
      message.success('Server restarted successfully');
      loadServerStatus();
    } catch (error) {
      message.error('Failed to restart server');
    } finally {
      setLoading(false);
    }
  };

  const formatUptime = (seconds: number) => {
    const days = Math.floor(seconds / 86400);
    const hours = Math.floor((seconds % 86400) / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    return `${days}d ${hours}h ${minutes}m`;
  };

  return (
    <div style={{ padding: '24px' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '24px' }}>Server Control</h1>

      <Card title="Server Status" style={{ marginBottom: '16px' }}>
        <Descriptions column={2}>
          <Descriptions.Item label="Status">
            <Tag color={serverStatus.running ? 'green' : 'red'}>
              {serverStatus.running ? 'Running' : 'Stopped'}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="Version">{serverStatus.version}</Descriptions.Item>
          <Descriptions.Item label="Uptime">
            {formatUptime(serverStatus.uptime)}
          </Descriptions.Item>
        </Descriptions>

        <Space style={{ marginTop: '16px' }}>
          <Button
            type="primary"
            icon={<PlayCircleOutlined />}
            onClick={handleStart}
            loading={loading}
            disabled={serverStatus.running}
          >
            Start
          </Button>
          <Button
            danger
            icon={<StopOutlined />}
            onClick={handleStop}
            loading={loading}
            disabled={!serverStatus.running}
          >
            Stop
          </Button>
          <Button
            icon={<ReloadOutlined />}
            onClick={handleRestart}
            loading={loading}
            disabled={!serverStatus.running}
          >
            Restart
          </Button>
        </Space>
      </Card>

      <Card title="Configuration">
        <p>Server configuration editor coming soon...</p>
      </Card>
    </div>
  );
};
